{% extends "base.html" %}

{% block title %}SurveyAnalyzer - 专业问卷数据分析平台{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">
            <i class="fas fa-home me-1"></i>
            首页
        </li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<!-- 欢迎横幅 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card bg-primary text-white">
            <div class="card-body text-center py-5">
                <h1 class="display-4 mb-3">
                    <i class="fas fa-chart-line me-3"></i>
                    欢迎使用 SurveyAnalyzer
                </h1>
                <p class="lead mb-4">专业的问卷调查数据分析平台，提供全面的数据洞察和智能分析</p>
                <a href="{{ url_for('main.upload_file') }}" class="btn btn-light btn-lg me-3">
                    <i class="fas fa-upload me-2"></i>
                    开始分析
                </a>
                <a href="{{ url_for('main.help_page') }}" class="btn btn-outline-light btn-lg">
                    <i class="fas fa-question-circle me-2"></i>
                    使用指南
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-md-3 col-sm-6 mb-3">
        <div class="stats-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="stats-number">{{ stats.total_analyses or 0 }}</div>
                    <div>总分析次数</div>
                </div>
                <div class="feature-icon">
                    <i class="fas fa-chart-bar"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 col-sm-6 mb-3">
        <div class="stats-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="stats-number">{{ stats.total_datasets or 0 }}</div>
                    <div>处理数据集</div>
                </div>
                <div class="feature-icon">
                    <i class="fas fa-database"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 col-sm-6 mb-3">
        <div class="stats-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="stats-number">{{ stats.total_reports or 0 }}</div>
                    <div>生成报告</div>
                </div>
                <div class="feature-icon">
                    <i class="fas fa-file-alt"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 col-sm-6 mb-3">
        <div class="stats-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="stats-number">{{ stats.active_users or 1 }}</div>
                    <div>活跃用户</div>
                </div>
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 功能特性 -->
<div class="row mb-4">
    <div class="col-12">
        <h2 class="text-center mb-4">
            <i class="fas fa-star me-2"></i>
            核心功能
        </h2>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-4 mb-4">
        <div class="card h-100 feature-card">
            <div class="card-body">
                <div class="feature-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h5 class="card-title">统计分析</h5>
                <p class="card-text">提供描述性统计、假设检验、相关性分析等全面的统计分析功能。</p>
                <a href="{{ url_for('main.analyze') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-right me-1"></i>
                    开始分析
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100 feature-card">
            <div class="card-body">
                <div class="feature-icon">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <h5 class="card-title">数据可视化</h5>
                <p class="card-text">支持多种图表类型，包括柱状图、饼图、散点图、热力图等。</p>
                <a href="{{ url_for('main.visualize') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-right me-1"></i>
                    创建图表
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100 feature-card">
            <div class="card-body">
                <div class="feature-icon">
                    <i class="fas fa-project-diagram"></i>
                </div>
                <h5 class="card-title">聚类分析</h5>
                <p class="card-text">使用K-means、层次聚类、DBSCAN等算法发现数据中的模式。</p>
                <a href="{{ url_for('main.cluster') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-right me-1"></i>
                    聚类分析
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-4 mb-4">
        <div class="card h-100 feature-card">
            <div class="card-body">
                <div class="feature-icon">
                    <i class="fas fa-brain"></i>
                </div>
                <h5 class="card-title">AI智能分析</h5>
                <p class="card-text">集成自然语言处理、情感分析、智能报告生成等AI功能。</p>
                <a href="{{ url_for('main.ai_analysis') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-right me-1"></i>
                    AI分析
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100 feature-card">
            <div class="card-body">
                <div class="feature-icon">
                    <i class="fas fa-cogs"></i>
                </div>
                <h5 class="card-title">高级分析</h5>
                <p class="card-text">提供降维分析、异常检测、时间序列分析等高级分析功能。</p>
                <a href="{{ url_for('main.advanced') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-right me-1"></i>
                    高级功能
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100 feature-card">
            <div class="card-body">
                <div class="feature-icon">
                    <i class="fas fa-file-alt"></i>
                </div>
                <h5 class="card-title">智能报告</h5>
                <p class="card-text">自动生成专业的分析报告，支持多种格式导出。</p>
                <a href="{{ url_for('main.reports') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-right me-1"></i>
                    生成报告
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 快速开始 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">
                    <i class="fas fa-rocket me-2"></i>
                    快速开始
                </h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>1. 上传数据</h5>
                        <p>支持CSV、Excel、JSON等多种格式的数据文件上传。</p>
                        
                        <h5>2. 选择分析</h5>
                        <p>根据您的需求选择合适的分析方法和可视化类型。</p>
                        
                        <h5>3. 查看结果</h5>
                        <p>获得详细的分析结果和专业的数据洞察。</p>
                    </div>
                    <div class="col-md-6">
                        <div class="text-center">
                            <img src="" alt="数据分析图表" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 最新功能 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">
                    <i class="fas fa-sparkles me-2"></i>
                    最新功能 (v2.0.0)
                </h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>AI智能分析:</strong> 集成自然语言处理和情感分析
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>实时处理:</strong> 支持数据流实时分析和监控
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>Web界面:</strong> 全新的现代化Web用户界面
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>高级分析:</strong> 降维分析、异常检测、时间序列
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>RESTful API:</strong> 完整的API接口支持
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <strong>智能报告:</strong> 自动生成专业分析报告
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 系统状态 -->
{% if system_status %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">
                    <i class="fas fa-server me-2"></i>
                    系统状态
                </h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="h4 text-{{ 'success' if system_status.cpu_usage < 80 else 'warning' if system_status.cpu_usage < 90 else 'danger' }}">
                                {{ "%.1f" | format(system_status.cpu_usage) }}%
                            </div>
                            <small class="text-muted">CPU使用率</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="h4 text-{{ 'success' if system_status.memory_usage < 80 else 'warning' if system_status.memory_usage < 90 else 'danger' }}">
                                {{ "%.1f" | format(system_status.memory_usage) }}%
                            </div>
                            <small class="text-muted">内存使用率</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="h4 text-success">
                                {{ system_status.uptime }}
                            </div>
                            <small class="text-muted">运行时间</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="h4 text-info">
                                v{{ system_status.version }}
                            </div>
                            <small class="text-muted">系统版本</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
// 页面加载动画
document.addEventListener('DOMContentLoaded', function() {
    // 统计数字动画
    const statsNumbers = document.querySelectorAll('.stats-number');
    statsNumbers.forEach(function(element) {
        const finalValue = parseInt(element.textContent);
        let currentValue = 0;
        const increment = Math.ceil(finalValue / 50);
        
        const timer = setInterval(function() {
            currentValue += increment;
            if (currentValue >= finalValue) {
                currentValue = finalValue;
                clearInterval(timer);
            }
            element.textContent = currentValue;
        }, 30);
    });
    
    // 功能卡片悬停效果
    const featureCards = document.querySelectorAll('.feature-card');
    featureCards.forEach(function(card) {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px)';
            this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 3px 10px rgba(0,0,0,0.1)';
        });
    });
});
</script>
{% endblock %}